<style>
.siteSetBox /deep/ .el-form-item {
  margin-bottom: 15px;
}
</style>
<!--  -->
<template>
  <div class="siteSetBox">
    <div v-loading="choose">
      <el-form ref="form" :model="sConfig" label-width="180px">
        <el-form-item v-loading="robotsstatus === -1" label="robots.txt文件是否开启：" style="margin-bottom: 8px">
          <el-radio-group @change="robotstatuschange()" v-model="robotsstatus">
            <el-radio :label="0">关闭</el-radio>
            <el-radio :label="1">开启</el-radio>
          </el-radio-group>
          <span v-if="parseInt(robotsstatus) === 1" style="margin-left: 24px"><a @click="editorRobots"
              style="font-size: 12px">编辑 robots.txt 文件</a></span>
          <p style="font-size: 12px; color: #5e6d82; line-height: 1.5em">
            默认域名下的内容为限制抓取，且不可改变！
          </p>
        </el-form-item>
        <el-form-item v-loading="mapLoading" label="网站地图开启：" style="margin-bottom: 8px">
          <el-radio-group @change="hostmapchange()" v-model="map">
            <el-radio :label="0">关闭</el-radio>
            <el-radio :label="1">开启（系统自动生成）</el-radio>
            <el-radio :label="2">开启（内容自定义）</el-radio>
          </el-radio-group>
          <span v-if="parseInt(map) === 2" style="margin-left: 24px"><a @click="editorSitemap"
              style="font-size: 12px">编辑 sitemap.xml 文件</a></span>
          <p style="font-size: 12px; color: #5e6d82; line-height: 1.5em">
            开启后可访问 /sitemap.xml 和 /sitemap.html 查看生成的网站地图
          </p>
        </el-form-item>
        <el-form-item label="选择SEO设置项：" style="margin-bottom: 8px">
          <el-radio-group v-model="sConfig.siteSeo">
            <el-radio label="1">整站SEO设置</el-radio>
            <el-radio label="0">当前语点SEO设置 -
              <b>{{
                currentSite && currentSite.language && currentSite.language.name
              }}</b>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <hr />
      <div v-loading="seo">
        <el-form ref="seo" :model="seoSite" label-width="180px">
          <el-form-item label="统一TKD：" style="margin-bottom: 8px">
            <el-radio-group v-model="seoSite.status">
              <el-radio :label="1">统一</el-radio>
              <el-radio :label="0">不统一</el-radio>
            </el-radio-group>
            <p style="font-size: 14px; color: #5e6d82; line-height: 1.5em">
              统一后，站点所有的页面都会根据当前配置的
              title、keywords、description
              进行渲染，而页面、系统分类、系统内容当中的SEO配置将无效！
            </p>
          </el-form-item>
          <el-form-item v-show="false" label="站点地图是否开启：" style="margin-bottom: 8px">
            <el-radio-group v-model="seoSite.siteMap">
              <el-radio :label="0">关闭</el-radio>
              <el-radio :label="1">开启</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="网页作者：">
            <el-input v-model="seoSite.author" style="width: 50%" size="medium" placeholder="厦门三五互联信息有限公司,https://www.35.cn/">
            </el-input>
          </el-form-item>
          <el-form-item label="重访时间：">
            <el-input v-model="seoSite.revisitAfter" style="width: 20%" size="medium"></el-input>
            <p style="font-size: 14px; color: #5e6d82; line-height: 1.5em">
              如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。
            </p>
          </el-form-item>
          <el-form-item label="Title 标题：">
            <el-input v-model="seoSite.title" style="width: 50%" size="medium" maxlength="250" placeholder="输入标题内容">
            </el-input>
          </el-form-item>
          <el-form-item label="Keywords 关键字：">
            <el-input v-model="seoSite.keywords" style="width: 80%" size="medium" maxlength="250" placeholder="输入关键字内容">
            </el-input>
          </el-form-item>
          <el-form-item label="Description 描述：">
            <el-input type="textarea" v-model="seoSite.description" style="width: 80%" maxlength="1500" rows="6"
              placeholder="输入描述内容">
            </el-input>
          </el-form-item>
          <el-form-item label="sns 社交标签：">
            <p style="font-size: 14px; color: #5e6d82; line-height: 1.5em">
              网页内容可以被其他社会化网站引用，目前这种协议被SNS网站如Fackbook、renren采用。（Open
              Graph Protocol）<br />
              如：<span v-text="exp"></span>
            </p>
            <div v-for="(item, index) in snsConfig" :key="index">
              <span style="font-size: 14px; color: #606266">property</span>
              <el-input v-model="item.property" style="width: 10%" size="mini" placeholder="og:url"></el-input>
              <span style="font-size: 14px; color: #606266; margin-left: 12px">content</span>
              <el-input v-model="item.content" style="width: 40%" size="mini" placeholder="URL地址"></el-input>
              <a @click="deleteOGP(index)" style="font-size: 12px; margin-left: 24px">删除</a>
            </div>
            <el-button type="success" icon="el-icon-plus" @click="addSns" circle></el-button>
          </el-form-item>
          <br />
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <!-- <el-button>取消</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </div>

    <HostRobotsDialog ref="hostRobotsDialog" />
    <HostSitemapXMLDialog ref="hostSitemapXMLDialog" />
  </div>
</template>

<script>
import HostRobotsDialog from '@/components/main/user/siteseo/common/HostRobotsDialog.vue'
import HostSitemapXMLDialog from '@/components/main/user/siteseo/common/HostSitemapXMLDialog.vue'
import { mapGetters } from 'vuex'
export default {
  created () {
    let siteSeo = parseInt(this.sConfig.siteSeo)
    if (!isNaN(siteSeo) && siteSeo >= 0) {
      this.$post('/seo/seosite', { site_seo: siteSeo }).then(response => {
        if (response && response.id) {
          this.seoSite = initSeoSiteData(this, response)
          if (!this.seoSite.author || this.seoSite.author === '') {
            this.seoSite.author = '厦门三五互联信息有限公司,https://www.35.cn/'
          }
        }
        this.choose = false
      })
    } else {
      let interval = setInterval(() => {
        if (!isNaN(parseInt(this.sConfig.siteSeo))) {
          this.choose = false
          clearInterval(interval)
        }
      }, 10)
    }
    this.$post('/host/robots/status', null).then(response => {
      if (response && response.status) {
        this.robotsstatus = parseInt(response.status)
      }
    })
  },
  mounted () {
    // 网站地图配置以及内容！
    this.$post('/host/get-hconfig-info', null).then(response => {
      if (response && response.id && parseInt(response.id)) {
        this.map = response.isMap
      } else {
        this.map = -1
      }
    })
  },
  computed: {
    ...mapGetters(['currentSite'])
  },
  data () {
    return {
      // h_robots status 字段的值
      robotsstatus: -1,
      sConfig: {
        siteSeo: this.$store.state && this.$store.state.site && this.$store.state.site.config ? '' + this.$store.state.site.config.siteSeo : ''
      },
      seoSite: {},
      // 选择是否加载
      choose: true,
      // 设置是否加载
      seo: false,
      // 例如
      exp: '<meta property="og:url" content="URL地址" />',
      snsConfig: [],
      // 网站地图
      mapLoading: false,
      map: -1
    }
  },
  watch: {
    currentSite (newVal) {
      newVal.config && (this.sConfig.siteSeo = '' + newVal.config.siteSeo)
    },
    sConfig: {
      handler (newVal) {
        let siteSeo = parseInt(newVal.siteSeo)
        if (isNaN(siteSeo)) {
          return
        }
        this.seo = true
        this.$post('/seo/seosite', { site_seo: siteSeo }).then(response => {
          if (response && response.id) {
            this.seoSite = initSeoSiteData(this, response)
          }
          this.seo = false
        })
      },
      deep: true
    },
    snsConfig: {
      handler (newVal) {
        let snsConfig = ''
        let snsConfigArray = []
        for (let i in newVal) {
          let item = newVal[i]
          if (item && item.property) {
            snsConfigArray.push(item)
          }
        }
        snsConfig = JSON.stringify(snsConfigArray)
        this.seoSite.snsConfig = snsConfig
      },
      deep: true
    }
  },
  methods: {
    onSubmit () {
      let siteSeo = parseInt(this.sConfig.siteSeo)
      if (isNaN(siteSeo)) {
        return
      }
      if (this.snsConfig.length > 0) {
        for (let i in this.snsConfig) {
          if (!this.snsConfig[i].property || !this.snsConfig[i].content) {
            this.$message.error('property或content不能为空！')
            return
          }
        }
      }
      if (!this.seoSite.author || this.seoSite.author === '') {
        this.seoSite.author = '厦门三五互联信息有限公司,https://www.35.cn/'
      }
      this.choose = true
      this.$jpost('/seo/seosite/save', { siteSeo: siteSeo, seoSite: this.seoSite }).then(response => {
        this.choose = false
        // 修改store
        this.$store.dispatch('siteChangeConfigSiteSeo', { siteSeo })
        this.seoSite = initSeoSiteData(this, response)
      })
    },
    addSns () {
      this.snsConfig.push({
        property: '',
        content: ''
      })
    },
    deleteOGP (index) {
      this.snsConfig.splice(index, 1)
    },
    editorRobots () {
      this.$refs['hostRobotsDialog'].show()
    },
    editorSitemap () {
      this.$refs['hostSitemapXMLDialog'].show()
    },
    robotstatuschange () {
      let status = this.robotsstatus
      this.robotsstatus = -1
      this.$post('/seo/robots/update-status', { status: status }).then(response => {
        if (response && response.status) {
          this.robotsstatus = parseInt(response.status)
        }
      })
    },
    hostmapchange () {
      let ismap = this.map
      this.mapLoading = true
      this.$post('/seo/save-hconfig-ismap', {
        ismap: ismap
      }).then(response => {
        this.mapLoading = false
      })
    }
  },
  components: {
    HostRobotsDialog,
    HostSitemapXMLDialog
  }
}

function initSeoSiteData (vue, seoSite) {
  if (!seoSite.revisitAfter) {
    seoSite.revisitAfter = '7 days'
  }
  if (!seoSite.snsConfig) {
    vue.snsConfig = []
  } else {
    let snsConfig = seoSite.snsConfig
    let snsConfigArray = JSON.parse(snsConfig)
    if (snsConfigArray.length > 0) {
      vue.snsConfig = snsConfigArray
    }
  }
  return seoSite
}

</script>
